<template>
  <div class="main">
  <div class="title"><span class="hot">国内数据</span></div>
  <div class="time">截至{{covData.modifyTime | time}}全国数据统计</div>
  <div class="content">
<van-row>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.currentConfirmedIncr | number}}</span></p>
        <p class="num big">{{covData.currentConfirmedCount}}</p>
        <strong>现存确诊</strong>
    </van-col>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.suspectedIncr | number}}</span></p>
        <p class="num big">{{covData.suspectedCount}}</p>
        <strong>境外输入</strong>
    </van-col>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.seriousIncr | number}}</span></p>
        <p class="num big">{{covData.seriousCount}}</p>
        <strong>现存无症状</strong>
    </van-col>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.confirmedIncr | number}}</span></p>
        <p class="num big">{{covData.confirmedCount}}</p>
        <strong>累计确诊</strong>
    </van-col>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.deadIncr | number}}</span></p>
        <p class="num big">{{covData.deadCount}}</p>
        <strong>累计死亡</strong>
    </van-col>
    <van-col span="8">
        <p>较昨日<span class="num">{{covData.curedIncr | number}}</span></p>
        <p class="num big">{{covData.curedCount}}</p>
        <strong>累计治愈</strong>
    </van-col>
</van-row>
  </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props:['covData'],
  filters:{
    //处理日期格式
    time(val){
     return moment(val).format('YYYY/MM/DD HH:mm:ss');
    },
    number(val){
        val=val>0?'+'+val:val;
        return val
    },
  }
}
</script>

<style scoped>
.title{
    margin:0.2rem;
    display: flex;
    

}
.title ::before{
        content: "";
        width:0.1rem;
        height: 0.32rem;
        margin-top:0.05rem;
        background:#4169e2;
}
.title.hot{
    margin-left: 0.14rem;
    font-size: 4rem;
}
.time{
    font-size: 0.28rem;
    color: #999;
    margin-left: .2rem;
}
.content{
    margin: 0.3rem;
    box-shadow: 0 0 5px rgba(0, 0,0,.1);
    border-radius: .08rem;
    text-align: center;
    padding-top: .2rem;
}
.content .van-col{
    margin-bottom: .2rem;
}
.van-col p{
    color: #333;
}
.content .big{
    font-size: .4rem;
    font-weight: bold;
}
.content .van-col:nth-child(1) .num{
   color: red;
}
.content .van-col:nth-child(2) .num{
   color:green;
}
.content .van-col:nth-child(3) .num{
   color: palevioletred;
}
.content .van-col:nth-child(4) .num{
   color: orange;
}
.content .van-col:nth-child(5) .num{
   color: skyblue;
}
.content .van-col:nth-child(6) .num{
   color:yellowgreen;
}
</style>